<template>
	<el-main>
		<el-row>
			<el-col :md="24">
				<el-alert
					title="日历插件使用了FullCalendar插件，并配置了二十四节气的农历信息"
					type="success"
					:closable="false">
				</el-alert>
				<div style="margin-top: 24px;">
					<FullCalendar ref="fullCalendar" :options="calendarOptions" />
				</div>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import { getCalendarList } from '@/api/calendar.js'
	import FullCalendar from '@fullcalendar/vue'
	import dayGridPlugin from '@fullcalendar/daygrid'
	import timeGridPlugin from '@fullcalendar/timegrid'
	import interactionPlugin from '@fullcalendar/interaction'
	import listPlugin from '@fullcalendar/list'
	import tippy from 'tippy.js'
	import '../../assets/tippy.css'
	import calendar from '../../utils/calendar.js'
	export default {
		components: {
			FullCalendar
		},
		data() {
			return {
				calendarOptions: {
					// 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
					plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
					initialView: 'dayGridMonth', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
					firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
					locale: 'zh-cn', // 切换语言，当前为中文
					allDaySlot: false, // 不显示all-day
					customButtons: { //自定义按钮
						getToday: {
							text: '今天',
							click: this.getToday
						},
						getNext: {
							text: '>',
							click: this.getNext
						},
						getPrev: {
							text: '<',
							click: this.getPrev
						},
						customButton: {
							text: '自定义按钮',
							click: this.customButton
						}
					},
					headerToolbar: { // 日历头部按钮
						left: 'getPrev,getNext getToday customButton',
						center: 'title',
						right: 'dayGridMonth,timeGridWeek'
					},
					buttonText: {
						today: '今天',
						month: '月',
						week: '周',
						day: '日'
					},
					slotLabelFormat: {
						hour: '2-digit',
						minute: '2-digit',
						meridiem: false,
						hour12: false // 设置时间为24小时
					},
					views: {
						// 月视图阳历转农历
						dayGridMonth: {
							displayEventTime: false, //是否显示时间
							dayCellContent(item) {
								let _date = new Date(item.date).toLocaleDateString().split('/');
								let _dateF = calendar.solarToLunar(_date[0], _date[1], _date[2]);
								// 以二十四节气覆盖农历日期
								if (calendar.getLunar24Days(_date[0], _date[1], _date[2])) {
									_dateF.dayStr = calendar.getLunar24Days(_date[0], _date[1], _date[2])
								}
								return {html:`<p>${item.dayNumberText}(${_dateF.dayStr})</p>`};
							}
						},
					},
					selectAllow: function(clickInfo) {
						// 设置过往时间无法点击
						if (clickInfo.end < new Date()) {
							return false;
						}
						return true;
					},
					weekends: true, //是否显示周末，设为false则不显示周六和周日
					selectable: true, //是否可以选中日历格
					editable: false, //是否可以进行（拖动、缩放）修改
					navLinks: true, //天链接
					select: this.selectDate, //选中日历格事件
					events: this.getCalendarList, //获取数据源
					eventMouseEnter: this.eventMouseEnter, //鼠标悬浮事件
					slotEventOverlap: true //相同时间段的多个日程视觉上是否允许重叠，默认true允许
				}
			}
		},
		methods: {
			// 自定义按钮
			customButton() {
				console.log("点击了自定义按钮");
			},
			// 今天
			getToday() {
				let calendarApi = this.$refs.fullCalendar.getApi();
				calendarApi.today();
				this.handleTime(
					calendarApi.currentData.dateProfile.activeRange
				);
			},
			// 下一步
			getNext() {
				let calendarApi = this.$refs.fullCalendar.getApi();
				calendarApi.next();
				this.handleTime(
					calendarApi.currentData.dateProfile.activeRange
				);
			},
			// 上一步
			getPrev() {
				let calendarApi = this.$refs.fullCalendar.getApi();
				calendarApi.prev();
				this.handleTime(
					calendarApi.currentData.dateProfile.activeRange
				);
			},
			// 处理时间格式
			handleTime(activeRange) {
				let result = {
					startStr: activeRange.start,
					endStr: activeRange.end
				}
				this.getCalendarList(result);
			},
			// 获取列表信息
			getCalendarList(result) {
				// 以当前时间插入数据
				var currentTime = this.dateFormat(
					'YYYY-mm-dd',result.startStr
				);
				let _this = this;
				getCalendarList().then((res) => {
					_this.calendarOptions.events = [];
					res.data.forEach(function(item,index) {
						var data = {
							id: item.id,
							title: item.title,
							start: currentTime,
							end: currentTime,
							color: item.color
						};
						_this.calendarOptions.events.push(data);
					});
				}).catch((err)=>{
					console.log(err);
				})
			},
			// 鼠标划过
			eventMouseEnter(info) {
				// 非周列表的情况下显示悬浮提示
				if (info.view.type != 'listWeek') {
					tippy(info.el, {
						content: info.event.title,
						placement: "top-start"
					});
				}
			},
			// 选择日期
			selectDate: function(arg) {
				let startTime = this.dateFormat('YYYY-mm-dd HH:MM',arg.start);
				let endTime = this.dateFormat('YYYY-mm-dd HH:MM',arg.end);
				console.log(startTime, endTime);
			},
			// 格式化时间
			dateFormat(fmt, date) {
				let ret = "";
				date = new Date(date);
				const opt = {
					'Y+': date.getFullYear().toString(), // 年
					'm+': (date.getMonth() + 1).toString(), // 月
					'd+': date.getDate().toString(), // 日
					'H+': date.getHours().toString(), // 时
					'M+': date.getMinutes().toString(), // 分
					'S+': date.getSeconds().toString() // 秒
				}
				for (let k in opt) {
					ret = new RegExp('(' + k + ')').exec(fmt)
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
						)
					}
				}
				return fmt;
			}
		}
	}
</script>

<style>
	.fc-daygrid-day-top p {
		font-size: 13px;
		color: #606266;
		margin-right: 10px;
	}
</style>
